// 创建一个路由器，并暴露出去

// 第一步：引入createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 引入一个一个可能要呈现组件
//  路由组件 一般放在 pages 或 views 等 视图
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
import Detail from '@/pages/Detail.vue'

// 第二步：创建路由器
const router = createRouter({
  history: createWebHistory(), //路由器的工作模式（稍后讲解）
  // 路由规则列表
  routes: [ //一个一个的路由规则
    {
      name: 'index',
      path: '/',
      // 重定向配置 ，还有其他的写法吗？
      // redirect: '/home'
      redirect: { name: 'home' }
    },

    {
      name: 'home',
      path: '/home',
      component: Home
    },
    {
      name: 'news',
      path: '/news',
      component: News,
      children: [
        {
          name: 'detail',
          //路径参数  如果是 params 路径参数 要这样写, 必须参数 id, title,content
          // path: 'detail/:id/:title/:content?',
          path: 'detail',
          component: Detail,
          // 第一种写法: 将路由收到的所有params 参数  作为props传给路由组件（Detail）
          // props: true


          // 第二种写法: 这种写法 针对 query 参数传递 组件传递 
          props(router) {
            return router.query
          }


          // 第三种写法 这样只能传固定值 用的比较少 这样只能传固定值。
          // props:{
          //   a:100,
          //   b:200,
          // }

        },

      ]
    },
    {
      name: 'about',
      path: '/about',
      component: About
    },
  ]
})

// 暴露出去router
export default router
